<script lang="ts" setup>
import type { GlobalTablePage } from "~/types/components.types";
import DataForm from "./DataForm.vue";

const [loading, toggleLoading] = useToggle(false);

const list = ref<any[]>([]);
const box = useTemplateRef<HTMLDivElement>("box");
const page: GlobalTablePage = reactive({
    index: 1,
    size: 20,
    total: 0
});
const sellerList = ref<any[]>([]);
const searchForm = ref({
    sellId: "all",
    status: "all"
});

const dialogVisible = ref(false);

async function getSellerList() {
    const { success, data } = await sellClient.sellerListApi({
        status: 1
    });
    if (success) {
        sellerList.value = data || [];
    }
}

const showDialog = () => {
    dialogVisible.value = true;
};

async function getListData() {
    const { stop } = useTimeoutFn(() => toggleLoading(true), 200);
    const { success, data } = await numberClient.numberPageListApi({
        sellerId: searchForm.value.sellId === "all" ? "" : searchForm.value.sellId,
        status: searchForm.value.status === "all" ? "" : searchForm.value.status,
        current: page.index,
        pageSize: page.size
    });
    stop();
    toggleLoading(false);
    if (success) {
        page.total = data.total;
        list.value = data.list || [];
    }
}

// 分页相关：监听页码切换事件
function onCurrentChange(val: number) {
    page.index = val;
    getListData();
}
// 分页相关：监听单页显示数量切换事件
function onSizeChange(val: number) {
    page.size = val;
    page.index = 1;
    getListData();
}

getSellerList();
getListData();
</script>

<template>
    <div class="global-box table-card">
        <div v-loading="loading" class="global-box-table" pr-5px>
            <div ref="box" class="box text-align-left h-full" flex flex-col>
                <div class="search-box">
                    <el-form :model="searchForm" inline size="small">
                        <el-form-item label="经销商" prop="province">
                            <el-select
                                style="width: 190px"
                                v-model="searchForm.sellId"
                                filterable
                                placeholder="请选择经销商"
                            >
                                <el-option label="全部" value="all" />
                                <el-option
                                    v-for="item in sellerList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-select
                                style="width: 190px"
                                v-model="searchForm.status"
                                placeholder="请选择状态"
                            >
                                <el-option label="全部" value="all" />
                                <el-option label="未分配" value="0" />
                                <el-option label="已分配" value="1" />
                                <el-option label="已锁定" value="2" />
                                <el-option label="已完成" value="3" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getListData">查询</el-button>
                            <el-button type="success" @click="showDialog()">新增</el-button>
                        </el-form-item>
                        <el-form-item> </el-form-item>
                    </el-form>
                </div>
                <div class="table-box flex-1 overflow-hidden">
                    <el-table :data="list" border stripe height="100%" size="small">
                        <el-table-column type="index" width="80" label="序号" align="center" />
                        <el-table-column prop="num" label="球杆编号" />
                        <el-table-column label="编号状态" v-slot="{ row }" align="center">
                            <el-text type="info" v-if="row.status === '0'" p-0>{{
                                "未分配"
                            }}</el-text>
                            <el-text type="success" v-else-if="row.status === '1'" p-0>{{
                                "已分配"
                            }}</el-text>
                            <el-text type="danger" v-else-if="row.status === '2'" p-0>{{
                                "已锁定"
                            }}</el-text>
                            <el-text type="primary" v-else-if="row.status === '3'" p-0>{{
                                "已完成"
                            }}</el-text>
                        </el-table-column>
                        <el-table-column label="归属经销商" v-slot="{ row }" align="center">
                            <span v-if="row.seller" p-0>{{ row.seller.name }}</span>
                        </el-table-column>
                        <el-table-column prop="status" label="订单" align="center">
                        </el-table-column>
                        <el-table-column prop="create_at" label="创建时间" align="center">
                            <template #default="scope">
                                {{ stickUtils.dateFormat(scope.row.create_at - 0) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pt-[15px]">
                    <el-pagination
                        v-model:current-page="page.index"
                        class="system-page"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total"
                        :page-size="page.size"
                        :page-sizes="[10, 20, 50, 100]"
                        @current-change="onCurrentChange"
                        @size-change="onSizeChange"
                    />
                </div>
            </div>
        </div>
        <DataForm @submitSuccess="getListData" v-model:visible="dialogVisible" />
    </div>
</template>

<style lang="scss" scoped>
.el-link {
    + .el-link {
        margin-left: 10px;
    }
}
</style>
